<template>
  <div class="box-1">
    <div class="top">购买会员</div>
    <div class="top-1">
      <div class="top-2">订单编号</div>
      <div class="top-3" id="myText">{{ number }}</div>
      <div class="top-4" @click="copy(number)">复制</div>
    </div>
  </div>
  <div class="box-1">
    <div class="top1">
      <div class="lan"></div>
      购买会员
    </div>
    <div class="top-1">
      <div class="top-2">开通账号</div>
      <div class="top-3">{{ account }}</div>
    </div>
    <div class="top-1">
      <div class="top-2">已选省份</div>
      <div class="top-5" style="display: flex; color: #333333; margin-left: 20px">
        <!-- {{typeof query.city }} -->
        <div v-if="types1 == 1">{{ city(query.city) }}</div>
        <div v-else v-for="item in query.city" style="margin-right: 20px">
          {{ city(item) }}
        </div>
      </div>
    </div>
    <div class="top-1">
      <div class="top-2">已选时间</div>
      <div class="top-3" v-if="query.yue == 1">{{ query.digit }}月</div>
      <div class="top-3" v-if="query.yue == 2">{{ query.digit }}年</div>
    </div>
    <div class="top-1">
      <div class="top-2">开通套餐</div>
      <div class="top-3">{{ type(query.vipType) }}</div>
    </div>
    <div class="top-1">
      <div class="top-2">到期时间</div>
      <div class="top-3">{{ timestamp(query.time) }}</div>
    </div>
    <div class="top-1">
      <div class="top-2">实付金额</div>
      <div class="top-3" style="display: flex">
        <div style="color: red">{{ query.amount }}</div>
        元
      </div>
    </div>
  </div>
  <div class="box-1">
    <div class="top1">
      <div class="lan"></div>
      付款信息
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="微信支付" name="first">
        <div class="zif">
          支付成功后如需开发票，请拨打客服电话：158-5557-3332
        </div>
        <div class="ewm-box">
          <qrcode-vue class="ewm" :value="weChatPaymentCode" size:400></qrcode-vue>
        </div>
        <div class="ewm-button">
          <img src="../../assets/img/组 5371@2x.png" alt="" />
          <div>使用微信扫码付款</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="支付宝支付" name="second" @tab-click="zfb()">
        <div class="zif">
          支付成功后如需开发票，请拨打客服电话：187-8889-8240
        </div>
        <div class="ewm-box">
          <qrcode-vue class="ewm" :value="zfbPaymentCode" size:400></qrcode-vue>
        </div>
        <div class="ewm-button">
          <img style="height: 18px;width: 18px;" src="../../assets/img/组 5372.png" alt="" />
          <div>使用支付宝扫码付款</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="对公转账" name="third">
        <div class="zif1">
          汇款后，请尽快与我们联系，我们将及时为您处理，联系电话：187-8889-8240
        </div>
        <div class="fz1">
          <div class="top-1" style="margin-top: 20px">
            <div class="top-2">账户名称</div>
            <div class="top-3">安徽六度标讯科技有限公司</div>
          </div>
          <div class="top-1">
            <div class="top-2">账户号码</div>
            <div class="top-3">34050146590800003122</div>
          </div>
          <div class="top-1">
            <div class="top-2">开户银行</div>
            <div class="top-3">中国建设银行股份有限公司合肥华府骏苑支行</div>
          </div>
        </div>
        <div class="top-1">
          <div class="top-2">应付金额</div>
          <div class="top-3" style="display: flex">
            <div style="color: red">{{ query.amount }}</div>
            元
          </div>
        </div>
        <div class="top-1">
          <div class="top-2" style="color: red">
            汇款备注：打款时，请务必在备注中填写当前登录平台的手机号
          </div>
        </div>
        <div class="fz" @click="handleCopy">复制</div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <Fot></Fot>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import Fot from "../../components/fotter/index.vue";

import { useRoute, useRouter } from "vue-router";
import {
  memberPrices,
  weChatPayment,
  testVerify,
  orderNobypayStatus,
  alipayPayment,
} from "../../Api/complete/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { timestamp, timestamp1 } from "@/utils/index";
import { userInfo } from '@/Api/api.js'
// import Clipboard from "clipboard";
import axios from "axios";
import QrcodeVue from "qrcode.vue";

import { getCurrentInstance, onMounted, onUnmounted } from "vue";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();

// const { toClipboard } = clipboard3();
const router = useRouter();
// const token = localStorage.getItem("token");
const query = router.currentRoute.value.query;
const types = typeof query.city;
const types1 = ref();
if (types == "string") {
  types1.value = 1;
} else {
  types1.value = 2;
}

console.log(query);

const number = ref(0);
const activeName = ref("first");
const weChatPaymentCode = ref(0);
const zfbPaymentCode = ref(0);
import CryptoJS from "crypto-js";
const key = CryptoJS.enc.Utf8.parse("ysh425ptjhcpo781"); //十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse('53c5a64c6be84e97'); //十六位十六进制数作为密钥偏移量
const token = localStorage.getItem("token");
//解密
function decrypt(text) {
  var result = CryptoJS.AES.decrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return result.toString(CryptoJS.enc.Utf8)
}
//加密
function encrypt(text) {
  return CryptoJS.AES.encrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  }).toString();
}
const account = ref('')
let ids
if (token) {
  userInfo().then(rex => {
    ids = rex.data.data
    account.value = ids.account
    state.timeInter = setInterval(() => {
      dingshi();
    }, 3000);
    postWxPrice();
  })
}

const zhifu = ref("0");
const jiam = ref()
const dingshi = () => {
  const form = reactive({
    orderid: number,
  });
  //   weChatPayment
  orderNobypayStatus(form).then((res) => {
    if (res.data.code == 1) {
      zhifu.value = res.data.data.pay_status;
      if (res.data.data.pay_status == "yes") {
        ids.level_id = res.data.data.user_list.level_id;
        router.push("head");
      }
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const state = reactive({
  timeInter: null, //定义定时器
});
const inputValue = ref("");

onMounted(() => {

});
onUnmounted(() => {
  clearInterval(state.timeInter); //销毁
  state.timeInter = null;
});
const copy = async (val) => {

  try {
    await toClipboard(val);
    console.log("复制成功!");
  } catch (e) {
    console.log(e);
  }
};

const options = [
  {
    value: "110000",
    label: "北京",
  },
  {
    value: "120000",
    label: "天津",
  },
  {
    value: "310000",
    label: "上海",
  },
  {
    value: "500000",
    label: "重庆",
  },
  {
    value: "130000",
    label: "河北",
  },
  {
    value: "410000",
    label: "河南",
  },
  {
    value: "370000",
    label: "山东",
  },
  {
    value: "140000",
    label: "山西",
  },
  {
    value: "610000",
    label: "陕西",
  },
  {
    value: "150000",
    label: "内蒙古",
  },
  {
    value: "210000",
    label: "辽宁",
  },
  {
    value: "220000",
    label: "吉林",
  },
  {
    value: "230000",
    label: "黑龙江",
  },
  {
    value: "320000",
    label: "江苏",
  },
  {
    value: "330000",
    label: "浙江",
  },
  {
    value: "340000",
    label: "安徽",
  },
  {
    value: "420000",
    label: "湖北",
  },
  {
    value: "430000",
    label: "湖南",
  },
  {
    value: "360000",
    label: "江西",
  },
  {
    value: "350000",
    label: "福建",
  },
  {
    value: "440000",
    label: "广东",
  },
  {
    value: "460000",
    label: "海南",
  },
  {
    value: "450000",
    label: "广西",
  },
  {
    value: "520000",
    label: "贵州",
  },
  {
    value: "530000",
    label: "云南",
  },
  {
    value: "510000",
    label: "四川",
  },
  {
    value: "620000",
    label: "甘肃",
  },
  {
    value: "640000",
    label: "宁夏",
  },
  {
    value: "650000",
    label: "新疆",
  },
  {
    value: "630000",
    label: "青海",
  },
  {
    value: "540000",
    label: "西藏",
  },
  {
    value: "810000",
    label: "香港",
  },
  {
    value: "820000",
    label: "澳门",
  },
  {
    value: "710000",
    label: "台湾",
  },
];
//会员转换
const type = (event) => {
  var a = null;
  if (event == 2) {
    a = "标准版";
  } else if (event == 3) {
    a = "高级版";
  } else if (event == 4) {
    a = "VIP版";
  }
  return a;
};
//城市转换
const city = (event) => {
  var a = null;
  options.forEach((element) => {
    if (element.value == event) {
      a = element.label;
    }
  });
  return a;
};
const postWxPrice = () => {
  var a = null;
  if (query.yue == 1) {
    a = "m";
  } else {
    a = "y";
  }
  const form = reactive({
    clientid: ids.clientid,
    level_id: query.vipType,
    rid: query.rid,
    pay_price: query.amount,
    num: query.digit,
    type: query.type,
    unit: a,
    city: JSON.stringify(query.city),
  });
  //   weChatPayment
  weChatPayment(form).then((res) => {
    if (res.data.code == 1) {
      number.value = res.data.data.orderid;
      weChatPaymentCode.value = res.data.data.code_url;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
  // alipayPayment(form).then((res) => {
  //   if (res.data.code == 1) {
  //     console.log(res.data.data);
  //     // number.value = res.data.data.orderid;
  //     number.value = res.data.data.out_trade_no;
  //     zfbPaymentCode.value = res.data.data.qr_code;
  //   } else {
  //     ElMessage.error(res.data.msg);
  //   }
  // });
};

const handleClick = (event) => {
  console.log(event.props.label);
  if (event.props.label == '支付宝支付') {
    zfb()
  }
}
const zfb = () => {
  var a = null;
  if (query.yue == 1) {
    a = "m";
  } else {
    a = "y";
  }
  const form = reactive({
    clientid: ids.clientid,
    level_id: query.vipType,
    rid: query.rid,
    pay_price: query.amount,
    num: query.digit,
    type: query.type,
    unit: a,
    city: JSON.stringify(query.city),
  });
  alipayPayment(form).then((res) => {
    if (res.data.code == 1) {
      console.log(res.data.data);
      // number.value = res.data.data.orderid;
      number.value = res.data.data.out_trade_no;
      zfbPaymentCode.value = res.data.data.qr_code;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
}
//复制
const onCopy = async () => {
  // try {
  //       await toClipboard(number.value)
  //       ElMessage({
  //           type: 'success',
  //           message: '复制成功!'
  //       })
  //   } catch (err) {
  //       console.error(err)
  //       ElMessage({
  //           type: 'error',
  //           message: '复制失败，请手动复制'
  //       })
  //   }
};
// 复制
const handleCopy = (val) => {
  const textarea = document.createElement("textarea"); // 创建input对象
  const personDiv = document.querySelectorAll(".fz1"); // 获取需要复制文字的容器
  let str = "";
  for (let i = 0; i < personDiv.length; i++) {
    if (i < personDiv.length - 1) {
      str += personDiv[i].innerText + ",";
    } else {
      str += personDiv[i].innerText;
    }
  }
  textarea.value = str; // 设置复制内容
  document.body.appendChild(textarea); // 添加临时实例
  textarea.select(); // 选择实例内容
  document.execCommand("Copy"); // 执行复制
  document.body.removeChild(textarea); // 删除临时实例
  ElMessage({
    message: "复制成功",
    type: "success",
    customClass: "copy-el-message",
  });
};
</script>
<style lang="scss" scoped>
.box-1 {
  width: 1200px;
  // height: 138px;
  background: #ffffff;
  border-radius: 0px;
  margin: 20px auto;
  padding: 40px;
}

.top {
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24px;
  color: #333333;
  line-height: 24px;
}

.top1 {
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  line-height: 16px;
  display: flex;
}

.top-1 {
  margin-top: 20px;
  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #a9b1be;
  display: flex;
}

.top-3 {
  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-left: 20px;
  // line-height: 0px;
}

.top-4 {
  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #f43107;
  margin-left: 10px;
}

.lan {
  width: 4px;
  height: 16px;
  background: #f43107;
  border-radius: 10px;
  margin-top: 2px;
  margin-right: 10px;
}

.zif {
  height: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #ff4848;
  margin-top: 2px;
}

.zif1 {
  margin-top: 5px;
  height: 36px;
  background: #e6e9fe;
  border-radius: 4px;
  line-height: 36px;
  color: #333333;
  padding: 0 20px;
}

.ewm-box {
  width: 150px;
  height: 150px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #dddddd;
  padding: 8px;
  margin-top: 20px;
}

.ewm {
  width: 134px !important;
  height: 134px !important;
  background: #e3e3e3;
  border-radius: 0px;
  // border: 8px solid #fff;
}

.ewm-button {
  display: flex;
  margin-top: 25px;

  img {
    width: 20px;
    height: 18px;
    margin-right: 6px;
  }
}

.demo-tabs {
  margin-top: 17px;
}

:deep() {
  .el-tabs__nav-scroll {
    margin-left: 20px;
  }

  .el-tabs__content {
    margin-left: 20px;
  }

  .el-tabs__item {
    height: 54px;
    // padding: 0;
    // margin:0;
    // line-height: 0px;
    // margin-top: 10px;
  }
}

.fz {
  width: 66px;
  height: 24px;
  background: #6675ff;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  line-height: 24px;
  margin-top: 20px;
}

.footerBox {
  position: relative;
  bottom: 0;
}
</style>
